<template>
  <div class="carousel-container">
    <el-carousel height="75vh" motion-blur>
      <el-carousel-item v-for="item in data">
        <el-image style="width: 100%" :src="item?.projectImg" @click="openProject(item)" />
      </el-carousel-item>
    </el-carousel>
    <!-- 图标 -->
    <div class="qr-icon" @mouseover="showQr = true" @click="showQr = true" @mouseout="showQr = false">
      <img src="https://t1.chei.com.cn/ncss/cy/web/img/erweima_nor.png" alt="二维码图标" class="qr-icon-image" />
      <!-- 鼠标移入时显示二维码 -->
      <div v-if="showQr" class="qr-overlay">
        <img src="https://t4.chei.com.cn/ncss/cy/web/img/top_erweima_n.png?t=20240105" alt="二维码" class="qr-code" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {commendIds, openProject} from "../welcome/welcomeApi.js";
import { useUserStore } from "@/pinia/stores/user";

const userStore = useUserStore();
const userData = userStore.userInfo;
const data = ref([]);

const cementAll = async () => {
  data.value = [];
  await commendIds(userData.id).then((res) => {
    if (res.data && Array.isArray(res.data)) {
      const filteredData = res.data.filter((item) => item.projectImg !== undefined);
      data.value = filteredData;
    }
  }).catch((res) => {
    console.error("Error fetching commendIds:", res);
  });
};
onMounted(() => {
  cementAll();
});
// 控制二维码的显示
const showQr = ref(false); // 默认不显示二维码
</script>

<style scoped>
/* 轮播图容器 */
.carousel-container {
  position: relative;
  width: 100%;
}

/* 图标样式 */
.qr-icon {
  position: absolute;
  top: 20px;
  right: 135px;
  z-index: 2;
  cursor: pointer;
}

.qr-icon-image {
  width: 64px;
  height: 57px;
  border-radius: 50%;
}

/* 鼠标移入时显示的二维码 */
.qr-overlay {
  position: absolute;
  top: 88px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.qr-code {
  width: 318px;
  height: 207px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>
